<template>
  <view>
    <!-- 管理员审核 -->
    <view class="main-container">
      <view class="top-tab-bar">
        <view
          @click="tabClick(item, index)"
          :class="current === item.value ? 'tab-item-selected' : ''"
          class="tab-item"
          v-for="(item, index) in tabs"
          :key="index"
        >
          {{ item.name }}
        </view>
      </view>
    </view>
    <view class="search-box">
      <uni-search-bar
        placeholder="搜索订单号/金额/客户"
        bgColor="#FFFFFF"
        @confirm="search"
      />
    </view>
    <view class="order-list">
      <view class="order-card" v-for="(item, index) in list" :key="index">
        <view class="title-and-status">
          <view class="title-left">
            <view class="title-main">
              {{ item.serverCode }}
            </view>
            <view class="subhead">
              {{ item.serverValue }}
            </view>
          </view>
          <view class="status" style="font-weight: 700">{{ item.status }}</view>
        </view>
        <view class="userinfo">
          <view class="address">
            <view class="userinfo-left">
              <span class="name">{{ item.nursePatient.createUser }}</span>
              <span class="phone">{{ item.nursePatient.patientPhone }}</span>
            </view>
            <!-- 	<view class="userinfo-right">
							地址：{{item.nursePatient.patientAddress}}
						</view> -->
          </view>
          <view class="address">
            <view class="userinfo-left">
              <span class="name"
                >{{ item.nursePatient.patientName }}(被护理人)</span
              >
              <!-- <span class="phone">{{item.phone}}</span> -->
            </view>
            <view class="userinfo-right">
              {{ item.nursePatient.patientPdiagnose }}
            </view>
          </view>
          <view class="address">
            <view class="userinfo-left" style="width: 100%">
              <span class="name"
                >地址：{{ item.nursePatient.patientAddress }}</span
              >
            </view>
          </view>
          <view class="address">
            <view class="userinfo-left" style="width: 100%">
              <span class="name"
                >服务周期：{{ item.serverStart }}--{{ item.serverEnd }}</span
              >
            </view>
          </view>
        </view>
        <view class="div-line" />
        <view class="work-title" v-if="item.nurseInfo !== null">
          <span v-if="roles == 1">已派单</span>
          <span v-if="roles == 2">已接单</span>
        </view>
        <view class="worker" v-if="item.nurseInfo !== null">
          <view class="avatar">
            <image :src="item.nurseInfo.nurseImage" mode=""></image>
          </view>
          <view class="worker-info">
            <view class="info">
              <view class="info-item">
                {{ item.nurseInfo.nurseName }}
              </view>
              <view class="info-item">
                {{ item.nurseInfo.nurseSex }}
              </view>
              <view class="info-item">
                {{ item.nurseInfo.nurseAge }}
              </view>
              <view class="info-item">
                {{ item.nurseInfo.nurseSkill }}
              </view>
            </view>
            <view class="info">
              <view class="info-item">
                {{ item.nurseInfo.nursePhone }}
              </view>
              <view class="info-item">
                {{ item.nurseInfo.nurseAddress }}
              </view>
            </view>
          </view>
        </view>
        <view class="div-line" />
        <view class="cycle-and-price">
          <view class="cycle" style="width: 60%"
            >下单时间：{{ item.createTime }}</view
          >
          <view class="price">订单金额：￥{{ item.orderAmout }}</view>
        </view>
        <view class="cycle-and-price">
          <view class="cycle" style="width: 100%"
            >订单编号：{{ item.orderNumber }}</view
          >
        </view>
        <view class="div-line" />
        <view class="service-btn">
          <!-- <view class="my-btn">
						取消
					</view> -->
          <view
            class="my-btn btn-green"
            v-if="
              roles == 1 &&
              item.orderState != 3 &&
              item.orderState != 0 &&
              item.orderState != 6 &&
              item.orderState != 6.1
            "
            @click="sendOrder(item)"
          >
            派单
          </view>
          <view
            class="my-btn btn-green"
            v-if="roles == 2 && item.orderState == 2"
            @click="takeOrderHandle(item)"
            >接单</view
          >
          <view
            class="my-btn btn-green"
            v-if="roles == 1 && item.orderState == 3"
            @click="cancelOrder(item)"
            >结束服务</view
          >
          <view
            class="my-btn btn-green"
            v-if="roles == 1 && item.orderState == 6"
            @click="refundHandle(item)"
            >退款审核</view
          >
          <view
            class="my-btn btn-green"
            v-if="item.orderState == 6.1"
            @click="toDetailCheck(item)"
            >详情</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import PageInfo from "../../utils/pageutils.js";
import {
  orderList,
  orderDetail,
  takeOrder,
  finishOrder,
} from "../../common/api/index.js";
export default {
  props: {
    isInIndex: false,
  },
  components: {},
  data() {
    return {
      tabs: [
        {
          name: "全部",
          value: "8",
        },
        {
          name: "待支付",
          value: "0",
        },
        {
          name: "待派单",
          value: "1",
        },
        {
          name: "待接单",
          value: "2",
        },
        {
          name: "待派单",
          value: "3",
        },
        {
          name: "待接单",
          value: "4",
        },
        {
          name: "服务中",
          value: "5",
        },
        {
          name: "服务已结束",
          value: "6",
        },
        {
          name: "已退款",
          value: "6.1",
        },
        {
          name: "已完成",
          value: "7",
        },
      ],
      current: 8,
      orderStatus: 8, //支付状态
      status: "", //状态
      readForm: {},
      list: [],
      pageInfo: new PageInfo(),
      roles: "",
    };
  },
  computed: {},
  mounted() {
    this.refresh();
  },
  onPullDownRefresh() {
    console.log("onPullDownRefresh", onPullDownRefresh);
    this.refresh();
  },
  onReachBottom() {
    console.log("222");
    this.loadMore();
  },
  onShow() {
    this.refresh();
  },
  methods: {
    tabClick(item, index) {
      console.log("item", item);
      this.current = item.value;
      this.refresh();
    },
    // 列表
    getList() {
      let userId = uni.getStorageSync("USER_ID");
      this.roles = uni.getStorageSync("ROLES");
      if (this.roles == 1000) {
        this.tabs = [
          {
            name: "全部",
            value: "8",
          },
          {
            name: "待支付",
            value: "0",
          },
          {
            name: "服务中",
            value: "5",
          },
          {
            name: "已取消",
            value: "5",
          },
          {
            name: "服务已结束",
            value: "6",
          },
          {
            name: "已退款",
            value: "6.1",
          },
          {
            name: "已完成",
            value: "7",
          },
        ];
      }
      if (this.roles == 1) {
        this.tabs = [
          {
            name: "全部",
            value: "8",
          },
          {
            name: "待支付",
            value: "0",
          },
          {
            name: "待派单",
            value: "1",
          },
          {
            name: "待派单",
            value: "3",
          },
          {
            name: "待接单",
            value: "4",
          },
          {
            name: "服务中",
            value: "5",
          },
          {
            name: "服务结束",
            value: "6",
          },
          {
            name: "已退款",
            value: "6.1",
          },
          {
            name: "已完成",
            value: "7",
          },
        ];
      }
      if (this.roles == 2) {
        this.tabs = [
          {
            name: "全部",
            value: "8",
          },
          {
            name: "待接单",
            value: "2",
          },
          {
            name: "待上门",
            value: "3",
          },
          {
            name: "服务中",
            value: "4",
          },
          {
            name: "已完成",
            value: "7",
          },
        ];
      }
      let params = {
        pageIndex: this.pageInfo.pageIndex,
        pageSize: this.pageInfo.pageSize,
        nurseId: userId,
        orderState: this.current,
        roles: this.roles,
        orderState: this.current,
      };
      console.log("params", params);
      orderList(params)
        .then((result) => {
          console.log("result", result);
          const list = result.data.rows || [];
          const total = result.data.total;
          this.list = [...this.list, ...list];
          this.pageInfo.total = total;
          this.pageInfo.loadedTotal = this.list.length;
          setTimeout(() => {
            if (this.pageInfo.isNotLoadAll) {
              this.status = "more";
            } else {
              this.status = "noMore";
            }
            uni.stopPullDownRefresh();
          }, 200);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    editHandle(item) {
      orderDetail({
        orderId: item.orderId,
      }).then((res) => {
        let info = res.data.data;
        this.$store.commit("page/setPageInfo", {
          chooseOrder: true,
          chooseOrderInfo: info,
        });
        uni.navigateTo({
          url: `/nursingWorkerPages/pages/itemDetail/itemDetail?code=${info.orderCategory}&serverId=${info.orderServer}`,
        });
      });
    },
    toDetail(item) {
      uni.navigateTo({
        url: `/nursingWorkerPages/pages/orderDetail/orderDetail?orderId=${item.orderId}`,
      });
    },
    toDetailCheck(item) {
      uni.navigateTo({
        url: `/nursingWorkerPages/pages/refundCheck/refundCheck?orderId=${item.orderId}`,
      });
    },
    // 刷新
    refresh() {
      this.pageInfo.reset();
      this.list = [];
      this.status = "loading";
      this.getList();
    },
    loadMore() {
      if (this.pageInfo.isNotLoadAll) {
        this.status = "loading";
        this.pageInfo.nextPage();
        this.getList();
      } else {
        this.status = "noMore";
      }
    },
    sendOrder(item) {
      uni.navigateTo({
        url:
          "/nursingWorkerPages/pages/nursingWorker/nursingWorker?orderId=" +
          item.orderId,
      });
    },
    // 接单
    takeOrderHandle(item) {
      uni.showModal({
        title: "提示",
        content: "确认接单?",
        success: (res) => {
          if (res.confirm) {
            console.log("用户点击确定");
            const param = {
              orderId: item.orderId,
            };
            takeOrder(param)
              .then((result) => {
                uni.showToast({
                  title: result.data.msg,
                });
                this.refresh();
              })
              .catch((error) => {
                console.log(error);
              });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    // 结束服务
    cancelOrder(item) {
      uni.showModal({
        title: "提示",
        content: "确认提交结束服务?",
        success: (res) => {
          if (res.confirm) {
            console.log("用户点击确定");
            const param = {
              orderId: item.orderId,
            };
            finishOrder(param)
              .then((result) => {
                uni.showToast({
                  title: result.data.msg,
                });
                this.refresh();
              })
              .catch((error) => {
                console.log(error);
              });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    // 退款
    refundHandle(item) {
      uni.navigateTo({
        url:
          "/nursingWorkerPages/pages/refundCheck/refundCheck?orderId=" +
          item.orderId,
      });
    },
  },
};
</script>
<style>
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
page {
  background: #f9f9f9;
}

.main-container {
  display: flex;
  flex-direction: column;
}

.top-tab-bar {
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(auto-fit, 150rpx);
  grid-template-rows: repeat(auto-fit, 66rpx);
  grid-column-gap: 20rpx;
  grid-row-gap: 26rpx;
  background: #f9f9f9;

  // position: sticky;
  // top: 0;
  // z-index: 2;
  .tab-item {
    width: 150rpx;
    height: 66rpx;
    background: #f1f1f1;
    border-radius: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(35, 35, 35, 0.8);
    font-size: 26rpx;
  }

  .tab-item-selected {
    background: #dff0ef;
    color: #0bc5ae;
  }
}

.order-card {
  margin-right: 30rpx;
  margin-left: 30rpx;
  background: white;
  padding: 30rpx;
  box-sizing: border-box;
  border-radius: 16rpx;
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;

  .title-and-status {
    display: flex;
    width: 100%;
    justify-content: flex-start;

    .title-left {
      display: flex;
      justify-content: flex-start;
      width: 80%;
      align-items: flex-start;

      .title-main {
        width: 220rpx;
        color: #333333;
        font-size: 35rpx;
        font-weight: 700;
        margin-right: 10rpx;
      }

      .subhead {
        color: #747474;
        font-size: 28rpx;
        width: 100%;
      }
    }

    .time {
      flex: 1;
      color: rgba(35, 35, 35, 0.7);
      font-size: 26rpx;
    }

    .status-box {
      font-size: 30rpx;
      color: #747474;
      // display: flex;
      // justify-content: center;
      // align-items: flex-start;
      // flex-direction: column;

      .distance {
        font-size: 25rpx;
        margin-top: 5rpx;
      }
    }
  }

  .item-tag {
    display: flex;
    justify-content: flex-start;
    // width: 80%;
    align-items: center;
    margin-top: 20rpx;
    flex-wrap: wrap;

    .service-tag {
      width: 110rpx;
      background-color: #eafaf5;
      font-size: 20rpx;
      color: #6f7070;
      padding: 5rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      border-radius: 25rpx;
      margin-right: 10rpx;
      margin-bottom: 10rpx;
    }
  }

  .cycle-and-price {
    display: flex;
    justify-content: space-between;
    font-size: 25rpx;
    color: #6c6c6c;
    margin-top: 10rpx;

    .cycle {
      width: 80%;
    }

    .price {
    }
  }

  .project-row {
    display: flex;
    align-items: center;
    margin-top: 36rpx;

    .img {
      width: 136rpx;
      height: 136rpx;
      border-radius: 20rpx;
    }

    .name {
      color: #232323;
      font-size: 32rpx;
      font-weight: bold;
      margin-left: 24rpx;
    }
  }

  .info-row {
    display: flex;
    margin-top: 40rpx;

    .name {
      width: 136rpx;
      color: rgba(35, 35, 35, 0.7);
      font-size: 26rpx;
    }

    .value {
      color: #232323;
      font-size: 26rpx;
    }
  }

  .div-line {
    width: 100%;
    height: 2rpx;
    background: #f8f8f8;
    margin-top: 40rpx;
  }

  .price-and-pay {
    display: flex;
    align-items: center;
    margin-top: 20rpx;

    .left {
      display: flex;
      align-items: center;
      flex: 1;
    }

    .cancel-btn {
      width: 150rpx;
      height: 60rpx;
      border: solid 2rpx rgba(35, 35, 35, 0.26);
      border-radius: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(35, 35, 35, 0.8);
      font-size: 26rpx;
      margin-left: 8rpx;
      margin-right: 8rpx;
    }

    .ok-btn {
      width: 150rpx;
      height: 60rpx;
      border: solid 2rpx #0bc5ae;
      border-radius: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0bc5ae;
      font-size: 26rpx;
      margin-left: 8rpx;
      margin-right: 8rpx;
    }
  }
}

.del-btn {
  width: 60rpx;
  height: 40rpx;
  border: solid 2rpx #c5070a;
  border-radius: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c5070a;
  font-size: 14rpx;
  margin-left: 8rpx;
  margin-right: 8rpx;
}

.service-btn {
  display: flex;
  justify-content: flex-end;
  margin-top: 20rpx;
  flex-wrap: wrap;
  padding-right: 50rpx;
}

.service-btn .my-btn:not(:last-child) {
  margin-right: 10rpx;
}

.my-btn {
  min-width: 140rpx;
  height: 58rpx;
  line-height: 58rpx;
  border: 1rpx solid #d0d0d0;
  border-radius: 40rpx;
  color: #787878;
  text-align: center;
}

.btn-green {
  border-color: #04bdb3;
  color: #04bdb3;
}

// search ---start
.search-box {
  margin: 0 30rpx;
}

/* 全局样式文件 */

// search ---end

.userinfo {
  margin-top: 15rpx;
  width: 100%;

  .address {
    display: flex;
    justify-content: flex-start;
    margin: 15rpx 0;
    align-items: center;

    .userinfo-left {
      width: 60%;

      .name {
        color: #3c3c3c;
        margin-right: 10rpx;
      }

      .phone {
        color: #6c6c6c;
      }
    }

    .userinfo-right {
      width: 45%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #6c6c6c;
    }
  }
}

/* 全局样式文件 */
::v-deep .uni-easyinput input:focus {
  /* 去除边框 */
  border: none;

  /* 去除聚焦时的边框 */
  &::after {
    border: none !important;
  }

  /* 去除聚焦时的内阴影 */
  &:focus {
    box-shadow: none !important;
  }
}

.work-title {
  color: #333333;
  font-size: 30rpx;
  font-weight: 700;
  margin-right: 20rpx;
  margin-top: 10rpx;
}

.worker {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: 80rpx;
  margin: 20rpx 0;

  .avatar {
    margin: 0 50rpx;

    image {
      width: 70rpx;
      height: 70rpx;
    }
  }

  .worker-info {
    .info {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin: 10rpx 0;
    }
  }
}

.info-item {
  font-size: 25rpx;
  color: #6c6c6c;
  margin-right: 15rpx;
}
</style>
